import React from 'react';
import {ScrollView, StyleSheet, Text, View} from 'react-native';
import {Drawer, Icon, List} from '@ant-design/react-native';
import PropTypes from 'prop-types';
import {drawerData} from '@page/drawer/Constant';
import NavigationUtil from '@nav/NavigationUtil';
import HeaderPortrait from '@page/drawer/HeadPortrait';


const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  textStyle: {
    fontSize: 20,
    margin: 5,
  },
  headPortrait: {
    flex: 2,
  },
  Scroll: {
    flex: 6,
    backgroundColor: '#ffffff',
  },
});
export default class DrawerPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {navigation: this.props.navigation};

    this.onOpenChange = isOpen => {
      /* tslint:disable: no-console */
      console.log('是否打开了 Drawer', isOpen.toString());
    };
  }

  static propTypes = {
    navigation: PropTypes.object,
  };

  static navigationOptions = {
    //不显示头部
    headerShown: false,
  };

  render() {
    const onPressText = routerName => {
      NavigationUtil.navigation = this.props.navigation;
      NavigationUtil.goPage(null, routerName);
    };
    const listItems = drawerData.map((item, index) => {
      return (
        <List.Item key={index} thumb={<Icon name={item.icon}/>}>
          <Text
            onPress={() => onPressText(item.router)}
            style={styles.textStyle}>
            {' ' + item.title}
          </Text>
        </List.Item>
      );
    });

    const sidebar = (
      <View style={[styles.container]}>
        <View style={styles.headPortrait}>
          <HeaderPortrait/>
        </View>
        <View style={styles.Scroll}>
          <ScrollView>
            <List>{listItems}</List>
          </ScrollView>
        </View>
      </View>
    );
    return (
      <Drawer
        sidebar={sidebar}
        position="left"
        open={false}
        drawerRef={el => (this.drawer = el)}
        onOpenChange={this.onOpenChange}
        drawerBackgroundColor="#ccc">
        {this.props.children}
      </Drawer>
    );
  }
}
